<!-- 普通游戏图片展示组件 -->
<template>
  <div class="card">
    <!-- 游戏名称 -->
    <transition name="fade" mode="out-in">
      <span :key="game.gname" class="tit"> {{ game.gname }} </span>
    </transition>
    <div class="tags">
        <span class="tag" v-for="(v,i) in tags" :key="i"><span v-if="v!='null'">{{ v }}</span></span>
    </div> 
    <!-- 游戏截图,动态显示 -->
    <div class="pics">
          <transition name="fade" mode="out-in">
            <img :key="`${game.photoa}`" :src="`${game.photoa}`" alt="">
          </transition>
          <transition name="fade" mode="out-in">
            <img :key="`${game.photob}`" :src="`${game.photob}`" alt="">
          </transition>
          <transition name="fade" mode="out-in">
            <img :key="`${game.photoc}`" :src="`${game.photoc}`" alt="">
          </transition>
          <transition name="fade" mode="out-in">
            <img :key="`${game.photod}`" :src="`${game.photod}`" alt="">
          </transition>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    game:{
        type: Object,
        default: {},
    },
  },
  data(){
      return{

      }
  },
  methods:{
    
  },
  computed:{
      tags(){
          var str = this.game.moretype+'';
          return str.split(',');
      }
  }
};
</script>

<style lang="less" scoped>

.card {
    width: 100%;
    padding: 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .tit{
        font-size: 22px;
        text-align: left;
        padding: 2px 0px 10px 0px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
  .tags {
    display: flex;
    flex-wrap: wrap;
    max-height: 50px;
    overflow: hidden;
    margin: 2px 0px 6px 0px;
    .tag {
      background-color: #394148;
      font-size: 12px;
      padding: 3px 8px;
      margin: 1px 2px;
      border-radius: 3px;
      flex-shrink: 0;
      color: #ddd;
    }
  }
  .pics{
    img{
        margin: 1px 0px;
        width: 100%;
        height: 150px;
        object-fit: cover;
        flex-shrink: 0;
        object-position: center;
    }
  }
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}
.fade-enter-to,
.fade-leave {
    opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
    transition: all 0.2s ease-in-out ;
}
</style>
